<template>
  <div class="cat">
          <div class="goods clearfix">
            <div class="list" v-for="(item ,index) in list" :key="index">
              <div class="img">
                <a href="#" target="_blank">
                  <img :src="item.goodPicture" alt="">
                </a>
              </div>
              <div class="goodsName ">
                <p class="goods_title">
                  <a href="#" target="_blank">{{item.goodsName}} </a>
                </p>
                <p class="info">
                  <span class="price left">￥{{item.goodPrice}}</span>
                  <span class="right">{{item.like}}人感兴趣</span>
                </p>
              </div>
            </div>
          </div>
        </div>
</template>

<script>
  export default {
    name: 'Goods',
    components: {},
    data() {
      return {
         list: [
    {
      id: 0,
      goodsName: '想学C++不用翻教材 百度大牛带你结合实践重学C++ ',
      goodPicture: require('@/assets/common/list1.png'),
      goodPrice: 448.00,
      like: 4971
    },
    {
      id: 1,
      goodsName: 'Python3入门机器学习 经典算法与应用  入行人工智能 ',
      goodPicture: require('@/assets/common/list2.png'),
      goodPrice: 499.00,
      like: 2669
    },
    {
      id: 2,
      goodsName: 'Vue3+ElementPlus+Koa2 全栈开发后台系统',
      goodPicture: require('@/assets/common/list3.png'),
      goodPrice: 368.00,
      like: 699
    },
    {
      id: 3,
      goodsName: '前端框架及项目面试 聚焦Vue3/React/Webpack',
      goodPicture: require('@/assets/common/list4.png'),
      goodPrice: 399.00,
      like: 3450
    },
    {
      id: 4,
      goodsName: '体系课-数据可视化入门到精通-打造前端差异化竞争力',
      goodPicture: require('@/assets/common/list5.png'),
      goodPrice: 848.00,
      like: 1127
    },
    {
      id: 5,
      goodsName: 'Google资深工程师深度讲解Go语言 由浅入深掌握Go语言',
      goodPicture: require('@/assets/common/list6.png'),
      goodPrice: 399.00,
      like: 5246
    },
    {
      id: 6,
      goodsName: 'Kubernetes 入门到进阶实战，系统性掌握 K8s 生产实践 ',
      goodPicture: require('@/assets/common/list7.png'),
      goodPrice: 299.00,
      like: 664
    },
    {
      id: 7,
      goodsName: '大学计算机必修课新讲--编译原理+操作系统+图形学',
      goodPicture: require('@/assets/common/list8.png'),
      goodPrice: 399.00,
      like: 1456
    },
    {
      id: 8,
      goodsName: '大学计算机必修课新讲--编译原理+操作系统+图形学',
      goodPicture: require('@/assets/common/list8.png'),
      goodPrice: 399.00,
      like: 1456
    },
    {
      id: 9,
      goodsName: '大学计算机必修课新讲--编译原理+操作系统+图形学',
      goodPicture: require('@/assets/common/list8.png'),
      goodPrice: 399.00,
      like: 1456
    },
    {
      id: 9,
      goodsName: '大学计算机必修课新讲--编译原理+操作系统+图形学',
      goodPicture: require('@/assets/common/list8.png'),
      goodPrice: 399.00,
      like: 1456
    },
    {
      id: 9,
      goodsName: '大学计算机必修课新讲--编译原理+操作系统+图形学',
      goodPicture: require('@/assets/common/list8.png'),
      goodPrice: 399.00,
      like: 1456
    },
    {
      id: 9,
      goodsName: '大学计算机必修课新讲--编译原理+操作系统+图形学',
      goodPicture: require('@/assets/common/list8.png'),
      goodPrice: 399.00,
      like: 1456
    },
    {
      id: 9,
      goodsName: '大学计算机必修课新讲--编译原理+操作系统+图形学',
      goodPicture: require('@/assets/common/list8.png'),
      goodPrice: 399.00,
      like: 1456
    },
    {
      id: 9,
      goodsName: '大学计算机必修课新讲--编译原理+操作系统+图形学',
      goodPicture: require('@/assets/common/list8.png'),
      goodPrice: 399.00,
      like: 1456
    },
  ]
      };
    },
    created() {},
    methods: {}, 
  };
</script>
<style lang="scss" scoped>
.goods{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  a {
    color: #545c63;
    font-size: 14.5px;
  }
}

// 每一行的最后一个元素不设置右边距
.list:not(:nth-child(5n)) {
  margin-right: 25px;
}
.list:last-child:nth-child(5n - 1) {
  margin-right: calc(220px + 25px);
}
.list:last-child:nth-child(5n - 2) {
  margin-right: calc(220px + 220px + 25px + 25px);
}
.list:last-child:nth-child(5n - 3) {
  margin-right: calc(220px + 220px + 220px + 25px + 25px + 25px);
}

 .list:hover{
  //  .img{
  //    .right-top{
  //      display: inline;
  //    }
  //  }
   box-shadow: 0 3px 15px 0 rgba(63, 150, 212, 0.3);
  }
.list {
    width: 220px;
    margin-bottom: 22px;
    // box-shadow: 0 3px 5px 0 rgba(95, 101, 105, 0.15);
    box-shadow: 0 3px 10px 0 rgba(152, 208, 248, 0.3);
    border-radius: 8px;

    // box-shadow: 0px 0px 2px #dddddd;
    // transition: all 0.2s linear;
    img {
      width:100%;
      border-radius: 8px 8px 0 0;
    }
    .goodsName {
     background: #fbfbfb;
      border-radius: 0 0 8px 8px;
      padding: 8px 8px;
      .goods_title {
        // height: 40px;
        overflow: hidden;
        line-height: 20px;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .info {
        display:flex;
        justify-content: space-between;
        margin: 15px 0 6px 0;
        font-size: 14px;
        color: #9199a1;
        .price {
          color: red;
        }
      }
    }
  }


</style>